//引入样式
require('../../assets/css/normalize.css')
require('../../assets/css/reset.css')
require('../../assets/fonts/iconfont.css');
require('./personaldata.less')

//引入模块
const dom = require('../../utils/dom.js')
let axios = require('../../utils/axios.js')

document.addEventListener("DOMContentLoaded", function () {
    //1.退回上一页
    dom.get('.back').addEventListener('click', function () {
        history.back();
    })
    //2.更换头像
    dom.get("#headchange").addEventListener('change', function () {
        //通过formData构造文件上传数据
        let fm = new FormData()
        fm.append('file', this.files[0]);

        //将构造好的文件上传发送到后台
        axios.post('/api/shared/uploadPortrait', fm).then(res => {
            if (res.data.errno === 0) {
                //上传成功
                alert('头像上传成功')
                dom.get('#head').src = axios.defaults.baseURL + res.data.data.url
                dom.get('#head').dataset.url = res.data.data.url
            } else {
                //上传失败
                alert('上传失败')
            }
        })


    })
    //3.更换昵称

    //4.显示性别选择框
    dom.get('#genderBox').addEventListener('click', function () {
        weui.picker([
            { label: '男', value: 0 },
            { label: '女', value: 1 },
            { label: '未知', value: 2 },
        ], {
            onConfirm: function (result) {
                dom.get('#gender').textContent = result[0].label
                dom.get('#gender').dataset.num = result[0].value
            },
            title: '选择性别'
        });
    });

    //5.显示日期选择框生日
    dom.get('#birthday').addEventListener('click', function () {
        weui.datePicker({
            start: 1990,
            end: new Date().getFullYear(),
            onConfirm: function (result) {
                let d = result.map(v => v.value).join('-')
                dom.get("#birthdayNum").textContent = d

            },
            title: '选择出生日期'
        })
    });

    //6.显示省份
    let provinceId = 0;
    dom.get('#province').addEventListener('click', async function () {
        //获取省份数据
        let province = await axios.get('api/shared/province')
        let proData = province.data.data
        let proArr = proData.map(v => {
            return { label: v.name, value: v.id }
        })
        weui.picker(proArr, {
            onConfirm: function (result) {
                dom.get('#province').textContent = result[0].label
                dom.get('#province').dataset.provinceId = result[0].value
                provinceId = result[0].value
            },
            title: '选择省份'
        });
    })

    //7.显示城市
    dom.get('#cityBox').addEventListener('click', async function () {
        //判断有没有选择省份
        if (!provinceId) {
            alert('请先选择省份')
            return;
        }
        let city = await axios.get('/api/shared/city?provinceId=' + provinceId)
        let cityData = city.data.data
        let cityArr = cityData.map(v => {
            return { label: v.name, value: v.id }
        })

        weui.picker(cityArr, {
            onConfirm: function (result) {
                dom.get('#city').textContent = result[0].label
                dom.get('#city').dataset.cityId = result[0].value
            },
            title: '选择城市'
        });
    })

    //8.签名数字统计
    dom.get('#sign').addEventListener('input', function () {
        dom.get('.textNum').textContent = this.value.length
    })
    //9.上传个人资料
    dom.get('.saveBtn').addEventListener('click', function () {
        //获取数据
        let nickName = dom.get('.nickname').value;
        let gender = Number(dom.get('#gender').dataset.num)
        let provinceId = Number(dom.get('#province').dataset.provinceId)
        let cityId = Number(dom.get('#city').dataset.cityId)
        let birthday = dom.get('#birthdayNum').textContent
        let imgUrl = dom.get('#head').dataset.url
        let sign = dom.get('#sign').value
        axios.post('/api/user/changeInfo', {
            nickName, gender, provinceId, cityId, birthday, imgUrl, sign
        }).then(res=>{
            if(res.data.errno===0){
                //存储token
                localStorage.setItem('token',res.data.data.token)
                alert('修改成功')
                location='./me.html'
            }else{
                alert('修改失败')
            }
        })
    })

    //10.回填数据
    axios.get('/api/user/info').then(async (res) => {
        let data = res.data.data;
        //回填头像
        dom.get('#head').src = axios.defaults.baseURL + data.imgUrl;
        dom.get('#head').dataset.url = data.imgUrl;
        //昵称
        dom.get('.nickname').value = data.nickName;
        //性别
        let genderArr = ['男', '女', '未知'];
        dom.get('#gender').textContent = genderArr[data.gender];
        dom.get('#gender').dataset.num = data.gender || 0;
        //生日
        dom.get('#birthdayNum').textContent = data.birthday;
        //省份
        let pro = await axios.get('api/shared/province');
        let [province] = pro.data.data.filter(v => v.id === data.provinceId);
        dom.get('#province').textContent = province.name||"未选择";
        dom.get('#province').dataset.provinceId = data.provinceId;
        //城市
        let city = await axios.get('/api/shared/city?provinceId=' + data.provinceId);
        let [curCity] = city.data.data.filter(v => v.id === data.cityId);
        dom.get('#city').textContent = curCity.name || "未选择";
        dom.get('#city').dataset.cityId = data.cityId;
        //个性签名
        dom.get('#sign').value = data.sign;
        dom.get('.textNum').textContent = data.sign.length;
    });

})
